<template>
  <view class="pay-apply">
    <view class="apply-content">
      <view class="info-content">
        <view class="info-main" v-if="infoShow === 1">
          <form @submit="formSubmit">
            <view class="uni-form-item uni-column">
              <view class="item-content">
                <view class="title item-content-title">日期</view>
                <view class="item-content-input">
                  <view class="uni-input">{{ date }}</view>
                </view>
              </view>
            </view>
            <view class="uni-form-item uni-column">
              <view class="item-content">
                <view class="title item-content-title">时间</view>
                <view class="item-content-input">
                  <view class="uni-input">{{ time }}</view>
                </view>
              </view>
            </view>

            <view class="uni-form-item uni-column">
              <view class="item-content">
                <view class="title item-content-title">姓名</view>
                <view class="item-content-input">
                  <input
                    class="uni-input"
                    name="name"
                    :value="name"
                    placeholder="输入姓名"
                  />
                </view>
              </view>
              <!-- <view class="title">姓名</view>
              <input class="uni-input" name="name" placeholder="输入姓名" /> -->
            </view>
            <view class="min" v-show="showName">请正确输入姓名</view>

            <view class="uni-form-item uni-column">
              <view class="item-content">
                <view class="title item-content-title">性别</view>
                <view class="item-content-input">
                  <radio-group name="gender">
                    <label>
                      <radio
                        style="transform: scale(0.7)"
                        color="#20b1ff"
                        value="男"
                        :checked="radio1"
                      />
                      <text>男</text>
                    </label>
                    <label>
                      <radio
                        style="transform: scale(0.7)"
                        color="#20b1ff"
                        :checked="radio0"
                        value="女"
                      />
                      <text>女</text>
                    </label>
                  </radio-group>
                </view>
              </view>
            </view>
            <view class="min" v-show="showGender">请选择性别</view>
            <view class="uni-form-item uni-column">
              <view class="item-content">
                <view class="title item-content-title">电话</view>
                <view class="item-content-input">
                  <input
                    class="uni-input"
                    name="phoneNumber"
                    :value="phoneNumber"
                    placeholder="输入电话"
                  />
                </view>
              </view>
            </view>
            <view class="min" v-show="showPhone">请正确输入电话号码</view>
            <view class="uni-form-item uni-column">
              <view class="item-content">
                <view class="title item-content-title">住址</view>
                <view class="item-content-input">
                  <input
                    class="uni-input"
                    name="address"
                    :value="address"
                    placeholder="例:六号楼一栋628"
                  />
                </view>
              </view>
            </view>
            <view class="min" v-show="showAddress">请正确输入地址</view>
            <view class="uni-btn-v">
              <button plain="true" form-type="submit" :disabled="isBtn">
                立即申请
              </button>
              <!-- <button type="default" form-type="reset">Reset</button> -->
            </view>
          </form>
        </view>
        <view class="info-step" v-else-if="infoShow === 2">
          <uni-steps
            active-color="#20b1ff"
            :options="[
              { title: '提交验证' },
              { title: '正在验证' },
              { title: '验证通过' },
            ]"
            :active="infoShow - 1"
          ></uni-steps>
          <view class="info-step-test"> 请等待工作人员验证 </view>
        </view>
        <view class="info-step" v-else-if="infoShow === 3">
          <uni-steps
            active-color="#20b1ff"
            :options="[
              { title: '提交验证' },
              { title: '正在验证' },
              { title: '验证通过' },
            ]"
            :active="infoShow - 1"
          ></uni-steps>
          <view class="info-step-test" style="color: #15bc84">
            已验证通过
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { GetTime } from "../../util/getTime";
export default {
  data() {
    let timeThis = new GetTime();
    return {
      name: "1",
      age: "2",
      radio0: false,
      radio1: false,
      phoneNumber: "3",
      address: "4",
      time: timeThis.timeNow(),
      date: timeThis.dateNow(),
      showName: false,
      showGender: false,
      showPhone: false,
      showAddress: false,
      openid: "",
      infoShow: 4,
      isBtn: false,
    };
  },
  onShow() {
    this.getPeopleInfo();
  },
  methods: {
    //获取默认的信息
    getPeopleInfo() {
      let that = this;
      uni.getStorage({
        key: "openid",
        success: function (res) {
          // console.log(res);
          that.openid = res.data;
          that.openidTest();
          that
            .$MyRequest({
              url: "/get_all_people",
              method: "POST",
              data: {
                openid: that.openid,
              },
            })
            .then((res) => {
              // console.log(res);
              let defaultdata = res.data.data[0];
              that.name = defaultdata.name;
              that.address = defaultdata.address;
              that.age = defaultdata.age;
              that.phoneNumber = defaultdata.phone;
              if (defaultdata.gender == 1) {
                that.radio1 = true;
              } else {
                that.radio0 = true;
              }
            });
        },
        fail: (err) => {},
      });
    },
    //申请状态显示
    openidTest() {
      this.$MyRequest({
        url: "/test_pay_apply",
        method: "POST",
        data: {
          openid: this.openid,
        },
      }).then((res) => {
        console.log(res.data.mesg + "post返回");
        this.infoShow = res.data.mesg;
      });
    },
    formSubmit(e) {
      let formdata = e.detail.value;
      console.log(formdata);

      if (formdata.name.length < 2 || formdata.name.length > 5) {
        this.showName = true;
        return;
      } else {
        this.showName = false;
      }
      console.log(formdata.gender.length);
      if (formdata.gender.length == 0) {
        this.showGender = true;
        return;
      } else {
        this.showGender = false;
      }
      let phoneReg = /^1\d{10}$/;
      if (!phoneReg.test(formdata.phoneNumber)) {
        this.showPhone = true;
        return;
      } else {
        this.showPhone = false;
      }
      console.log(formdata.address.length);
      if (formdata.address.length <= 5) {
        this.showAddress = true;
        return;
      } else {
        this.showAddress = false;
      }
      this.isBtn = true;
      // console.log(tem);
      this.$MyRequest({
        url: "/set_pay_apply",
        method: "POST",
        data: {
          openid: this.openid,
          name: formdata.name,
          age: formdata.age,
          gender: formdata.gender,
          phoneNumber: formdata.phoneNumber,
          address: formdata.address,
          time: this.date + " " + this.time,
        },
      }).then((result) => {
        // console.log(result);
        if (result.data.mesg == "ok") {
          uni.showToast({
            title: "已提交申请",
            duration: 1500,
          });
          setTimeout(() => {
            uni.navigateBack({ delta: 1 });
          }, 1500);
        }
        // uni.navigateTo({ url: "/pages/home/service/TemperatureList" });
      });
    },
  },
};
</script>

<style lang="scss">
@import "@/static/styles/mixin.scss";
.pay-apply {
  background-color: $uni-color-indexBg;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 25rpx 20rpx;
}
.apply-content {
  background-color: $uni-color-mainBg;
  box-sizing: border-box;
  padding: 0 12rpx;
  border-radius: 2%;
  .info-content {
    margin: 0 15rpx;
    .info-main {
      padding: 0 15rpx;
      background-color: $uni-color-mainBg;
      box-sizing: border-box;
      .uni-column {
        border-bottom: 1rpx solid #d8d8de;
        padding: 12rpx 0;
        .item-content {
          display: flex;
          align-items: center;
          .title {
            // font-size: 55rpx;
            font-size: 30rpx;
            padding: 20rpx 0;
          }
          .item-content-input {
            padding-left: 80rpx;
            .uni-input {
              // padding-left: 40rpx;
              font-size: 30rpx;
              color: #c0c0c0;
            }
          }
        }
        // .title {
        //   padding: 30rpx 0;
        // }
      }
      .uni-btn-v {
        padding: 50rpx 0 20rpx 0;
        // border-top: 0 20rpx solid;
        button {
          width: 50%;
          border-radius: 30rpx;
          font-size: 24rpx;
          color: #fff;
          // size: 10;
          height: 70rpx;
          @include center;
          background-color: $uni-color-primary;
          border: none;
        }
      }
    }
    .info-step {
      // margin-top: 20%;
      width: 100%;
      padding: 30rpx 0;
      box-sizing: border-box;
      // marggn-top: 100rpx;
      // background-color: $uni-color-mainBg;
      .uni-steps {
        // height: 200rpx;
        background-color: $uni-color-mainBg;
        active-color: $uni-color-primary;
        // transform: scale(1.1);
        padding: 60rpx 0;

        box-sizing: border-box;
        // @include center;
        // font-size:80rpx;
        .uni-steps__row {
          // transform: scale(1.8);
        }
      }
    }
    .info-step-test {
      background-color: $uni-color-mainBg;
      padding: 0 0 20rpx 0;
      @include center;
      color: $uni-color-warning;
    }
  }
}
.min {
  font-size: 19rpx;
  color: #fa3534;
  // font-weight: bold;
}
</style>
